<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 100%;
            border: 1px solid red;
            border-spacing: 0px;
            border-collapse: collapse;
        }

        table tr td {
            border: 1px solid red;
            height: 20px;
        }
    </style>
</head>

<body>
    行：<input type="text" id="num1">
    列：<input type="text" id="num2">
    <button id="btn">生成</button>
    <table id="table">

    </table>
    <script>
        // 循环生成列表数据，然后使用js实现隔行变色
        btn.onclick = function () {
            let n1 = num1.value;
            let n2 = num2.value;
            let res = '';
            for (var i = 0; i < n1; i++) {
                res += '<tr>'
                for (var j = 0; j < n2; j++) {
                    res += '<td></td>'
                }
                res += '</tr>'
            }
            table.innerHTML = res;
        }

       btn.onclick = function(){
           let table = document.getElementById('table');
           let rows = document.getElementById('num1').value;
           let cols = document.getElementById('num2').value;
           let row,col;
           for(var i = 0;i < rows.length; i++){
                
           }
       }

    </script>


</body>

</html>